<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>

    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <style>
        .aui-bar-nav {
            background-color: #fc6d4d;
            position: relative;
        }

        .aui-bar-nav .aui-btn .aui-iconfont,
        .aui-bar-nav .aui-title {
            color: #fff
        }

        body {
            margin: 0
        }

        img {
            border: none
        }

        section {
            width: 100%;
            box-sizing: border-box;
            padding: 20px 15px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: bold;
        }

        .rw {
            padding-bottom: 23px;
            border-bottom: 1px solid #F0F0F0;
            margin-bottom: 25px;
        }

        .rw .img {
            width: 58px;
            height: 58px;
            box-sizing: border-box;
            border-radius: 50%;
            display: inline-block;
            overflow: hidden;
            margin-right: 14px;
            float: left;
        }

        .rw .img img {
            width: 100%
        }

        .rw .te {
            float: left;
        }

        .rw .te h4 {
            margin-top: 9px;
            color: #333;
            font-size: 13px;
            margin-bottom: 14px;
            line-height: 13px;
        }

        .rw .te p {
            color: #999;
            font-size: 12px;
            line-height: 13px;
        }

        .zs {
            margin-bottom: 24px;
            padding-bottom: 25px;
            border-bottom: 1px solid #F0F0F0
        }

        .zs .ti * {
            display: inline-block;
        }

        .zs .ti span {
            ;
            background-color: #666;
            width: 3px;
            height: 12px;
            margin-right: 6px
        }

        .zs .ti h4 {
            color: #333;
            line-height: 13px;
            font-size: 13px;
            margin: 0;
            margin-bottom: 20px;
        }

        .zs .img {
            padding: 0;
            margin: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .zs .img .col {
            padding: 0;
            margin-left: 12px;
            width: 102px;
            float: left;
            box-sizing: border-box;
        }

        .zs .img .col:first-child {
            margin-left: 0px;
        }

        .zs .img .col img {
            width: 100%;
            display: block;
            height: 74px;
        }

        .zwpj {
            margin-bottom: 25px;
            padding-bottom: 26px;
            border-bottom: 1px solid #F0F0F0
        }

        .zwpj .ti * {
            display: inline-block;
        }

        .zwpj .ti span {
            ;
            background-color: #666;
            width: 3px;
            height: 12px;
            margin-right: 6px
        }

        .zwpj .ti h4 {
            color: #333;
            line-height: 13px;
            font-size: 13px;
            margin: 0;
            margin-bottom: 20px;
        }

        .zwpj .te p {
            line-height: 26px;
            font-size: 12px;
            color: #999;
            margin: 0;
        }

        .clearfix {
            clear: both;
        }

        .zhpf {
            margin-bottom: 25px;
            padding-bottom: 26px;
            border-bottom: 1px solid #F0F0F0
        }

        .zhpf .ti * {
            display: inline-block;
        }

        .zhpf .ti span {
            ;
            background-color: #666;
            width: 3px;
            height: 12px;
            margin-right: 6px
        }

        .zhpf .ti h4 {
            color: #333;
            line-height: 13px;
            font-size: 13px;
            margin: 0;
            margin-bottom: 20px;
        }

        .zhpf .con {
            width: 100%;
            box-sizing: border-box;
        }

        .zhpf .con .col {
            float: left;
            width: 33.333333333%;
            position: relative;
            height: 116px;
            box-sizing: border-box;
            padding-right: 40px;
        }

        .zhpf .con .col:first-child+.col {
            padding-left: 10px;
            padding-right: 30px
        }

        .zhpf .con .col:first-child+.col+.col {
            padding-right: 0
        }

        .zhpf .con .col span {
            display: block;
            width: 73px;
            height: 73px;
            border-radius: 50%;
            text-align: center;
            border: 1px solid #999;
            box-sizing: border-box;
            margin: 0 auto;
        }

        .zhpf .con .col span * {
            text-align: center;
        }

        .zhpf .con .col span h4 {
            font-size: 15px;
            color: #999;
            margin-top: 22px;
            margin-bottom: 9px;
            line-height: 11px;
            font-family: "Arial"
        }

        .zhpf .con .col span h5 {
            font-size: 12px;
            color: #999;
            margin-top: 0;
            line-height: 12px;
        }

        .zhpf .con .col .te * {
            text-align: center;
        }

        .zhpf .con .col .te h6 {
            margin: 9px 0
        }

        .zhpf .con .col .te p {
            color: #ABABAB;
            font-size: 12px;
            line-height: 13px;
            display: inline-block;
            margin: 0
        }

        .zhpf .con .col .te b {
            display: inline-block;
            width: 13px;
            height: 13px;
            box-sizing: border-box;
            ;
            text-align: center;
            background-color: #fc8622;
            text-align: center;
            position: relative;
        }

        .zhpf .con .col .te b img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 6px;
        }

        .zhpf .con .col .text {
            width: 53px;
            margin: 0 auto;
        }

        .gzpj {
            width: 100%;
            box-sizing: border-box;
        }

        .gzpj .ti * {
            display: inline-block;
        }

        .gzpj .ti span {
            ;
            background-color: #666;
            width: 3px;
            height: 12px;
            margin-right: 6px
        }

        .gzpj .ti h4 {
            color: #333;
            line-height: 13px;
            font-size: 13px;
            margin: 0;
            margin-bottom: 20px;
        }

        .gzpj .con {
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 33px;
        }

        .gzpj .con .col {
            padding-bottom: 17px;
            border-bottom: 1px solid #F0F0F0;
            margin-bottom: 15px;
            width: 100%;
            position: relative;
        }

        .gzpj .con .col .top {
            margin-bottom: 14px
        }

        .gzpj .con .col .img {
            width: 30px;
            height: 30px;
            margin-right: 8px;
            float: left;
            border-radius: 50%;
            overflow: hidden;
        }

        .gzpj .con .col .img img {
            width: 100%
        }

        .gzpj .con .col .te {
            float: left;
            padding-top: 3px;
            width: 252px;
            box-sizing: border-box;
        }

        .gzpj .con .col .te .tele {
            float: left;
        }

        .gzpj .con .col .te h4 {
            line-height: 11px;
            color: #666666;
            font-family: "Adobe Heiti Std R";
            font-size: 13px;
            margin-bottom: 7px;
            margin-top: 0
        }

        .gzpj .con .col .te h5 {
            line-height: 8px;
            color: #BEBEBE;
            font-family: "Arial";
            font-size: 11px;
            margin-top: 0
        }

        .gzpj .con .col .te img {
            position: absolute;
            right: 0;
            height: 11px;
            top: 5px;
        }

        .gzpj .con .col p {
            color: #666;
            line-height: 15px;
            font-size: 13px;
            height: 15px;
            overflow: hidden;
            ;
            text-overflow: ellipsis;
            margin: 0
        }

        button {
            border: 0;
            background-color: transparent;
            outline: none;
            display: block;
            width: 100%;
            margin: 0 auto;
            ;
            height: 40px;
            background-color: #fc8622;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 13px;
        }

        .lxjs {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
            background-color: rgba(0, 0, 0, 0.4);
            box-sizing: border-box;
            display: none
        }

        .lxjs .box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 275px;
            height: 285px;
            background-color: #fff;
            box-sizing: border-box;
            overflow: hidden;
            ;
            border-radius: 4px;
            transform: translate(-50%, -50%);
        }

        .lxjs .top {
            height: 99px;
            background-image: url(../../image/jieshoubg.png);
            background-repeat: no-repeat;
            background-position: center center;
            width: 100%;
            box-sizing: border-box;
        }

        .lxjs .top h4 {
            color: #fff;
            text-align: center;
            padding-top: 25px;
            line-height: 25px;
            font-size: 12px;
        }

        .lxjs .top span {
            color: #fff;
            font-size: 12px;
        }

        .lxjs .text {
            width: 100%;
            box-sizing: border-box;
            padding: 0 36px;
            padding-top: 36px;
            margin-bottom: 30px;
        }

        .lxjs .box .text .col {
            margin-bottom: 15px;
            position: relative;
            width: 100%;
            color: #999;
            font-size: 12px;
            vertical-align: middle;
        }

        .lxjs .box .text .col .img {
            width: 15px;
            margin-right: 9px;
            display: inline-block;
        }

        .lxjs .box .text .col img {
            display: block;
            margin: 0 auto;
        }

        .lxjs .box .text .col span {
            vertical-align: super;
        }

        .lxjs .box .text .col:first-child img {
            width: 12px;
            height: 14px;
        }

        .lxjs .box .text .col:first-child+.col img {
            width: 12px;
            height: 14px;
        }

        .lxjs .box button {
            background-color: transparent;
            margin: 0;
            width: 203px;
            display: block;
            height: 40px;
            text-align: center;
            margin: 0 auto;
            color: #fff;
            font-size: 13px;
            background-color: #fc8622;
            box-sizing: border-box;
            padding: 0;
            outline: none;
            border: 0;
            outline: none;
        }

        .lxjs .close {
            position: absolute;
            right: 10px;
            top: 10px;
            width: 8px;
            height: 8px;
        }

        .lxjs .close img {
            display: block;
            width: 100%
        }

        .jjtc {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background-color: rgba(0, 0, 0, 0.25);
            z-index: 1000000;
            display: none;
        }

        .jjtc .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            width: 250px;
            height: 225px;
            border-radius: 4px;
            box-sizing: border-box;
            ;
            overflow: hidden
        }

        .jjtc .top {
            ;
            width: 100%;
            height: 40px;
            background-image: -moz-linear-gradient( 90deg, rgb(253, 139, 59) 0%, rgb(255, 106, 1) 100%);
            background-image: -webkit-linear-gradient( 90deg, rgb(253, 139, 59) 0%, rgb(255, 106, 1) 100%);
            background-image: -ms-linear-gradient( 90deg, rgb(253, 139, 59) 0%, rgb(255, 106, 1) 100%);
        }

        .jjtc .top h4 {
            text-align: center;
            color: #fff;
            font-size: 12px;
            line-height: 40px;
        }

        .jjtc .box .close {
            position: absolute;
            top: 17px;
            right: 10px;
            width: 7px;
            height: 7px;
            cursor: pointer;
        }

        .jjtc .box .close img {
            width: 100%;
            display: block;
        }

        .jjtc .box .tetx {
            width: 100%;
            height: 120px;
            box-sizing: border-box;
            padding: 25px 24px;
        }

        .jjtc .box .tetx .col {
            width: 96px;
            height: 30px;
            box-sizing: border-box;
            border-radius: 2px;
            text-align: center;
            ;
            color: #999;
            font-size: 12px;
            line-height: 30px;
            border: 1px solid #e7e7e7;
            float: left;
            margin-bottom: 10px;
        }

        .jjtc .box .tetx .col:nth-child(2n) {
            float: right;
        }

        .jjtc .box button {
            display: block;
            margin: 0 auto;
            width: 203px;
            height: 40px;
            box-sizing: border-box;
            color: #fff;
            font-size: 13px;
            text-align: center;
            line-height: 40px;
            background-color: #fc8622;
            border-radius: 2px
        }

        .checked {
            color: #fc8622!important;
            border-color: #fc8622!important
        }

        .clearfix {
            clear: both;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <a class="aui-btn aui-pull-left" tapmode onclick="api.closeWin()">
            <span class="aui-iconfont aui-icon-left" style="font-size:14px;"></span>
        </a>
        <div class="aui-title" style="font-size:14px;">机手详情</div>
        <div id="search" tapmode onclick="qiehuan()" style=" width:16px;height:16px; right:10px;top:62%;transform:translateY(-50%);position:absolute">
            <img src="../../image/collection.png" style="width:100%;height:100%;display:block" id="soucang" alt="1">
        </div>
    </header>

    </header>

    <section id="jishourw">
        <div class="rw">
            <div v-for="site in renwu">
                <div class="img">
                    <img :src="site.img" :alt="site.id">
                </div>
                <div class="te">
                    <h4>{{site.title}}</h4>
                    <p>{{site.nianling}}&nbsp;&nbsp;&nbsp;&nbsp;驾龄{{site.jialing}}&nbsp;&nbsp;&nbsp;&nbsp;{{site.type}}</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="zs" id="zs">
            <div class="ti">
                <span></span>
                <h4>资格证书</h4>
            </div>
            <div class="img">
                <div class="col" v-for="site in zhengshu">
                    <img :src="site.img" :alt="site.id" @click="fangda(site.img)" class="zstp">
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="zwpj">
            <div class="ti">
                <span></span>
                <h4>自我评价</h4>
            </div>
            <div class="te" v-for="site in renwu">
                <p>{{site.text}}</p>
            </div>
        </div>
        <div class="zhpf">
            <div class="ti">
                <span></span>
                <h4>综合评分</h4>
            </div>
            <div class="con">
                <div class="col" v-for="site in zonghepingfen">
                    <span>
        <h4>{{site.pinfen}}</h4>
        <h5>{{site.title}}</h5>
      </span>
                    <div class="te">
                        <h6>{{site.gaodi}}</h6>
                        <div class="text">
                            <p>{{site.bilv}}</p>
                            <b><img src="../../image/show_ar.svg" alt=""></b>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="gzpj" id="guzhupingjia">
            <div class="ti">
                <span></span>
                <h4>雇主评价</h4>
            </div>
            <div class="con">
                <div class="col" v-for="site in guzhupingjia">
                    <div class="top">
                        <div class="img">
                            <img :src="site.img">
                        </div>
                        <div class="te">
                            <div class="tele">
                                <h4> {{site.type}}</h4>
                                <h5>{{site.time}}</h5>
                            </div>
                            <img src="../../image/xing_1.png" alt="" v-if="site.type == 'A'">
                            <img src="../../image/xing_2.png" alt="" v-else-if="site.type == 'B'">
                            <img src="../../image/xing_3.png" alt="" v-else-if="site.type == 'C'">
                            <img src="../../image/xing_4.png" alt="" v-else-if="site.type == 'D'">
                            <img src="../../image/xing_5.png" v-else>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <p>{{site.text}}</p>
                </div>
            </div>
        </div>
        <button id="canjia" type="button" @click="tongyi();" tapmode>同意</button>
        <button id="canjia" type="button" @click="jujue();" tapmode style="margin-top:10px">拒绝</button>
    </section>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">

    apiready = function() {
        api.parseTapmode();
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        jishourw = new Vue({
            el: '#jishourw',
            data: $tools.getdata()
        });
        id = api.pageParam.id;
        xid = api.pageParam.xid;

        ajax();
    };



    var jishourw, id, xid;
    var limt = 0;

    function canjia() {
        var lxjs = $api.byId('lxjs');
        $api.css(lxjs, 'display:block');
    }
    //接受邀请
    function lxjsjoin() {
        var canjia = $api.byId('canjia');
        $api.text(canjia, '已参加项目');
        $api.css(canjia, 'background-color: #999');
        var lxjs = $api.byId('lxjs');
        $api.css(lxjs, 'display:none');
    }
    //点关闭
    function lxjsclose() {
        var lxjs = $api.byId('lxjs');
        $api.css(lxjs, 'display:none');
    }

    function qiehuan() {
        shoucang = $api.byId('soucang');
        console.log();
        if ($api.attr(shoucang, 'alt') == 1) {
            $api.attr(shoucang, 'src', '../../image/collection_n.png');
            $api.attr(shoucang, 'alt', '2');
            api.toast({
                msg: '收藏成功',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            $api.attr(shoucang, 'src', '../../image/collection.png');
            $api.attr(shoucang, 'alt', '1');
            api.toast({
                msg: '取消成功',
                duration: 2000,
                location: 'bottom'
            });
        }

    }

    var zstpimg = document.getElementById("zs").getElementsByTagName("img");

    var length = zstpimg.length;

    for (var i = 0; i < length; i++) {
        zstpimg[i].index = i;
        zstpimg[i].onclick = function() {
            var zstpimgsrc = zstpimg[this.index].attr("src");
            console.log(zstpimgsrc)

        }
    };




    function fangda(data) {
        console.log(data)
        api.openWin({
            name: 'fdpic',
            url: 'fdpic.html',
            pageParam: {
                img: data
            }
        });

    }


    function ajax() {
        api.ajax({
            url: $api.getStorage("backapi") + '/index.php?s=jishou&c=home&m=show_ajax&uid=' + id,
            method: 'get',
        }, function(ret, err) {
            if (ret) {
                jishourw.zhengshu = ret.status.zhengshu;
                jishourw.renwu = ret.status.renwu;
                jishourw.guzhupingjia = ret.status.guzhupingjia;
                console.log(JSON.stringify(ret));
                xw_ajax();
            } else {
                console.log(JSON.stringify(err));
            }
        });

    }




    function xw_ajax() {

        api.ajax({
            url: $api.getStorage("backapi") + '/index.php?s=jishou&c=home&m=show_ajax&uid=' + id,
            method: 'post',
            data: {
                values: {
                    limt: limt
                },
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.status == "") {
                    // api.toast({
                    //     msg: '没有更多了',
                    //     duration: 2000,
                    //     location: 'bottom'
                    // });
                } else {
                    jishourw.xinwen = ret.status;
                    console.log(JSON.stringify(ret.status));
                    limt += 4;
                }

            } else {
                //console.log( JSON.stringify( err ) );
            }
        });

    }




    function yaoqing() {
        $api.css($api.byId("jjtc"), 'display:block');

    }





    function clos() {
        $api.css($api.byId("jjtc"), 'display:none');
    }


    function tongyi() {
        api.ajax({
            url: $api.getStorage("backapi") + '/index.php?s=xiangmu&c=home&m=jsty',
            method: 'post',
            data: {
                values: {
                    uid: id,
                    xid: xid
                }
            }
        }, function(ret, err) {
            if (ret) {
                api.toast({
                    msg: '参与成功',
                    duration: 2000,
                    location: 'bottom'
                });
                api.sendEvent({
                    name: 'reload',
                });

                api.closeWin();
            }
        });

    }



    function jujue() {
        api.ajax({
            url: $api.getStorage("backapi") + '/index.php?s=xiangmu&c=home&m=jsjj',
            method: 'post',
            data: {
                values: {
                    uid: id,
                    xid: xid
                }
            }
        }, function(ret, err) {
            if (ret) {
                api.toast({
                    msg: '参与成功',
                    duration: 2000,
                    location: 'bottom'
                });
                api.sendEvent({
                    name: 'reload',
                });

                api.closeWin();
            }
        });

    }

</script>

</html>
